<template>
	<div class="home-container">
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="item in lunbo" :key="item.id"><img :src="item.img" alt="" :class="{ full: isfull }" /></mt-swipe-item>
		</mt-swipe>
	</div>
</template>

<script>
export default {
	data() {
		return { isfull: '' };
	},
	props: ['lunbo']
};
</script>

<style lang="less" scoped="scoped">
.home-container {
	.mint-swipe {
		height: 200px;
		.mint-swipe-item {
			/* 让图片居中 */
			text-align: center;
			/* 交集选择器，设置每张图片的背景颜色，只是在测试阶段使用 */
			&:nth-child(1) {
				background-color: red;
			}
			&:nth-child(2) {
				background-color: blue;
			}
			&:nth-child(3) {
				background-color: green;
			}
			> img {
				// width: 100%;
				/* 
				注意：width:100%这个样式要根据图片的尺寸设置，有些图片长度够宽，可以设置宽度为100%，而有些缩略图中的图片尺寸小，
				并不需要设置width等于100%，只需要图片宽度自适应就好，所以使用vue中的样式，来决定width宽度值是否为100%，
				{full:true}或者{full:false}
				*/
				height: 100%;
				vertical-align: bottom;
			}
		}
	}
}
.full {
	width: 100%;
}
</style>
